<template>
  <view class="chapter-node">
    <!-- 左滑操作容器 -->
    <view class="slide-container">
      <!-- 操作按钮 -->
      <view class="action-buttons">
        <view class="action-btn rename-btn" @click="emitEdit">
          <text class="btn-text">重命名</text>
        </view>
        <view class="action-btn add-btn" @click="onTitleClick">
          <text class="btn-text">新增子集</text>
        </view>
        <view class="action-btn delete-btn" @click="emitDelete">
          <text class="btn-text">删除</text>
        </view>
      </view>

      <!-- 内容区域 -->
      <view
        class="content-wrapper"
        @touchstart="onTouchStart"
        @touchmove="onTouchMove"
        @touchend="onTouchEnd"
        :style="{ transform: `translateX(${translateX}px)` }"
      >
        <view class="chapter-item" :class="[`level-${level}`, { 'has-children': hasChildren, sliding: isSliding }]" :style="getItemStyle">
          <!-- 展开/收起箭头 -->
          <!-- 章节标题 -->
          <text class="chapter-title" @click="onjump">{{ node.name }}</text>
          <text @click="onTitleClick" class="fu-iconfont2 list_fd1_0_c0_c1_c1_c0_ibhf">&#xe7b6;</text>
          <view v-if="hasChildren" class="expand-icon" :class="{ expanded: isExpanded }">
            <!-- <text class="icon">▶</text> -->

            <image @click="toggleExpand" class="icon" :src="isExpanded ? STATIC_URL + 'up.png' : STATIC_URL + 'down.png'" mode=""></image>
          </view>
          <view v-else class="expand-placeholder"></view>
        </view>
      </view>
    </view>
    <!-- 子章节 -->
    <view v-if="hasChildren && isExpanded" class="children-container">
      <chapter-node
        v-for="child in node.children"
        :key="child.id"
        :node="child"
        :level="level + 1"
        @on-edit="$emit('on-edit', $event)"
        @on-jump="$emit('on-jump', $event)"
        @on-add-child="$emit('on-add-child', $event)"
        @on-delete="$emit('on-delete', $event)"
        @on-click="$emit('on-click', $event)"
      />
    </view>
  </view>
</template>

<script>
import slideManager from '@/common/utils/slide-manager'

export default {
  name: 'chapter-node',
  props: {
    node: {
      type: Object,
      required: true,
    },
    level: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      isExpanded: this.level < 0,
      translateX: 0,
      startX: 0,
      currentX: 0,
      isTouching: false,
      isSliding: false,
      slideId: `slide-${this.node.aid}`,
    }
  },
  computed: {
    hasChildren() {
      return this.node.children && this.node.children.length > 0
    },
    getItemStyle() {
      const basePadding = 24
      const levelPadding = this.level * 40
      return {
        paddingLeft: `${basePadding + levelPadding}rpx`,
      }
    },
  },
  mounted() {
    // 监听关闭滑动事件
    uni.$on('closeSlide', (slideId) => {
      console.log(111)
      console.log(slideId)
      if (slideId === this.slideId) {
        this.resetSlide()
      }
    })
  },
  beforeDestroy() {
    uni.$off('closeSlide')
  },
  methods: {
    // 触摸事件处理
    onTouchStart(e) {
      console.log(this.slideId)
      // 检查是否需要关闭其他滑动项目
      if (slideManager.shouldCloseCurrent(this.slideId)) {
        slideManager.closeCurrentSlide()
      }

      this.isTouching = true
      this.startX = e.touches[0].clientX
      this.currentX = this.startX
    },

    onTouchMove(e) {
      if (!this.isTouching) return

      this.currentX = e.touches[0].clientX
      const diffX = this.startX - this.currentX

      // 只允许向左滑动，最大滑动距离为操作按钮宽度
      if (diffX > 0) {
        this.translateX = -Math.min(diffX, 240)
        this.isSliding = true

        // 通知管理器开始滑动
        slideManager.startSlide(this.slideId)
      } else if (diffX < -10) {
        // 向右滑动时关闭
        this.resetSlide()
      }
    },

    onTouchEnd() {
      this.isTouching = false

      if (this.isSliding) {
        // 判断是否应该保持展开状态
        if (this.translateX < -80) {
          this.translateX = -240 // 完全展开操作按钮
        } else {
          this.resetSlide()
        }
      }
    },

    // 重置滑动状态
    resetSlide() {
      this.translateX = 0
      this.isSliding = false
      this.isTouching = false
      slideManager.endSlide(this.slideId)
    },

    // 展开/收起
    toggleExpand() {
      // 展开收起时也关闭滑动状态
      this.resetSlide()
      this.isExpanded = !this.isExpanded
    },

    // 事件传递
    onTitleClick() {
      // 先关闭所有滑动
      slideManager.closeAllSlides()

      // 确保滑动状态已重置
      this.resetSlide()

      // 短暂延迟确保滑动状态已更新
      setTimeout(() => {
        // 只有在没有滑动的情况下才触发点击
        if (!this.isSliding && this.translateX === 0) {
          console.log('触发章节点击:', this.node.title)
          this.$emit('on-click', this.node)
        } else {
          console.log('点击被忽略，滑动状态:', this.isSliding, '偏移:', this.translateX)
        }
      }, 50)
    },
    onjump() {
      // this.$emit('on-jump', this.node)
      // this.resetSlide()

      // 先关闭所有滑动
      slideManager.closeAllSlides()

      // 确保滑动状态已重置
      this.resetSlide()

      // 短暂延迟确保滑动状态已更新
      setTimeout(() => {
        // 只有在没有滑动的情况下才触发点击
        if (!this.isSliding && this.translateX === 0) {
          console.log('触发章节点击:', this.node)
          this.$emit('on-jump', this.node)
        } else {
          console.log('点击被忽略，滑动状态:', this.isSliding, '偏移:', this.translateX)
        }
      }, 50)
    },
    emitEdit() {
      this.$emit('on-edit', this.node)
      this.resetSlide()
    },

    emitAddChild() {
      this.$emit('on-add-child', this.node)
      this.resetSlide()
    },

    emitDelete() {
      this.$emit('on-delete', this.node)
      this.resetSlide()
    },
  },
}
</script>

<style scoped>
.chapter-node {
  width: 100%;
  /* margin-bottom: 2rpx; */
}

.slide-container {
  position: relative;
  overflow: hidden;
}

.action-buttons {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  min-width: 240rpx;
}

.action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24rpx;
}

.rename-btn {
  background: #53a7fc;
  width: 156rpx;
}

.add-btn {
  background: #fcc14f;
  width: 184rpx;
}

.delete-btn {
  background: #e74c3c;
  width: 128rpx;
}

.btn-text {
  color: white;
  font-size: 24rpx;
  white-space: nowrap;
}

.content-wrapper {
  transition: transform 0.3s ease;
  background: white;
}

.chapter-item {
  display: flex;
  align-items: center;
  padding: 28rpx 30rpx;
  /* border-bottom: 1rpx solid #f0f0f0; */
  background: white;
  min-height: 120rpx;
  transition: all 0.3s ease;
}

.chapter-item.sliding {
  background: #f8f9fa;
}

.expand-icon {
  /* width: 40rpx; */
  height: 40rpx;
  margin-right: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.list_fd1_0_c0_c1_c1_c0_ibhf {
  margin: 0rpx 32rpx 0rpx auto;
  color: rgba(40, 96, 244, 1);
}

/* .expand-icon.expanded {
  transform: rotate(180deg);
} */

.expand-icon .icon {
  width: 24rpx;
  height: 24rpx;
  /* font-size: 24rpx; */
  color: #666;
}

.expand-placeholder {
  width: 40rpx;
  margin-right: 20rpx;
}

.chapter-title {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}

.slide-hint {
  font-size: 22rpx;
  color: #999;
  margin-left: 20rpx;
}

.children-container {
  background: #fafafa;
}

/* 层级样式 */
.level-0 .chapter-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #2c3e50;
}

.level-1 .chapter-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #34495e;
}

.level-2 .chapter-title {
  font-size: 28rpx;
  color: #5d6d7e;
}

.level-3 .chapter-title {
  font-size: 26rpx;
  color: #7f8c8d;
}

.level-4 .chapter-title {
  font-size: 24rpx;
  color: #95a5a6;
}
</style>
